<template>
	<view class="my-page">
		<!-- 设置按钮 -->
		<view class="setting">
			<uv-icon name="setting" color="#2979ff" size="28" @tap="gotosettingView"></uv-icon>
		</view>
		<!-- 顶部用户信息区域 -->
		<view class="user-section">
			<view class="user-header">
				<uv-avatar class="avatar" src="https://via.placeholder.com/200x200.png/2878ff"></uv-avatar>
				<text class="username">书友_938383737</text>
			</view>
			<!-- 账户余额 -->
			<view class="balance-section">
				<view class="balance-item">
					<text class="amount">320</text>
					<text class="label">我的书币</text>
				</view>
				<view class="balance-item">
					<text class="amount">320</text>
					<text class="label">我的书券</text>
				</view>
				<view class="recharge-btn" @click="gotorechargeView">
					<text class="btn-text">去充值</text>
					<uv-icon name="arrow-right" color="#ff9500" size="16"></uv-icon>
				</view>
			</view>
		</view>
		<!-- VIP信息 -->
		<view class="vip-section">
			<image src="/static/images/my/diamond.png" mode="aspectFill"></image>
			<text class="vip-text">VIP会员将在2天后到期</text>
			<view class="renew-btn" @click="gotovipRenewView">
				<text class="btn-text">立即续费</text>
				<uv-icon name="arrow-right" color="#ff9500" size="16"></uv-icon>
			</view>
		</view>
		<!-- 常用功能区域 -->
		<view class="function-section">
			<text class="section-title">常用功能</text>
			<view class="function-grid">
				<view class="function-item" @click="gotohistoryView">
					<uv-icon name="clock" size="28"></uv-icon>
					<text>浏览历史</text>
				</view>
				<view class="function-item" @click="gotomessageView">
					<uv-icon name="email" size="28"></uv-icon>
					<text>我的消息</text>
				</view>
				<view class="function-item" @click="navigateTo('/pages/author/apply')">
					<uv-icon name="account" size="28"></uv-icon>
					<text>成为作家</text>
				</view>
				<view class="function-item" @click="navigateTo('/pages/feedback/index')">
					<uv-icon name="empty-order" size="28"></uv-icon>
					<text>反馈与帮助</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			gotosettingView() {
				uni.navigateTo({
					url: '/pages/my/settingView'
				})
			},
			gotorechargeView(){
				uni.navigateTo({
					url: '/pages/my/rechargeView'
				})
			},
			gotovipRenewView(){
				uni.navigateTo({
					url: '/pages/my/vipRenewView'
				})
			},
			gotohistoryView(){
				uni.navigateTo({
					url: '/pages/my/historyView'
				})
			},
			gotomessageView(){
				uni.navigateTo({
					url: '/pages/my/messageView'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-page {
		background-color: #f6f8fa;

		.setting {
			padding: 0 20px;
			height: 49px;
			background-color: #fff;
			display: flex;
			flex-direction: row-reverse;
		}
	}

	// 顶部用户信息区域
	.user-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 35px;
		margin-bottom: 20rpx;

		.user-header {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.username {
				font-size: 32rpx;
			}
		}
	}

	// 用户余额
	.balance-section {
		display: flex;
		align-items: center;
		padding: 20rpx 0;

		.balance-item {
			flex: 1;

			.amount {
				font-size: 36rpx;
				font-weight: bold;
				display: block;
			}

			.label {
				font-size: 24rpx;
			}
		}

		.recharge-btn {
			display: flex;
			align-items: center;
			color: #ff9500;
			font-size: 28rpx;
		}
	}

	// VIP信息
	.vip-section {
		display: flex;
		align-items: center;
		padding: 20rpx 20px;
		background-color: #fff;
		margin-bottom: 20rpx;

		image {
			width: 30px;
			height: 30px;
		}

		.vip-text {
			flex: 1;
			margin-left: 10rpx;
			font-size: 28rpx;
		}

		.renew-btn {
			display: flex;
			align-items: center;
			color: #ff9500;
			font-size: 28rpx;
		}
	}

	// 常用功能区域
	.function-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;

		.section-title {
			font-size: 32rpx;
			display: block;
			margin-bottom: 30rpx;
		}

		.function-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 30rpx;

			.function-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				text {
					font-size: 24rpx;
					margin-top: 10rpx;
					color: #666;
				}
			}
		}
	}
</style>